<template>
  <view>
    <view class="headerContain">
      <!-- 小程序标题 -->
      <view class="title">
        <view class="titleInfo">
          <img src="https://diancan.glbuys.com/businessfiles/logo/1579693655.jpg" alt="" />
          <view style="margin-left: 10px; padding-bottom: 10px">
            <view style="font-size: 28rpx margin-bottom: 20px">外卖到家点餐</view>
            <view>关注公众号，下次可在公众号中"点餐"!</view>
          </view>
          <view>关注</view>
        </view>
      </view>
      <!-- 商家标题 -->
      <view class="businessTitle">
        <view class="box">
          <view class="businessInfo">
            <img style="width: 90rpx; height: 90rpx; border-radius: 6px" :src="businessInfo.logo" alt="" />
            <view class="title">
              <view style="margin-left: 20rpx">{{ businessInfo.branch_shop_name }}</view>
              <image style="width: 50rpx; height: 50rpx" @click="goBack" class="icon" src="@/static/主页.png" alt="" />
            </view>
          </view>
          <view v-if="businessInfo.notice" class="notice">公告: {{ businessNotice.notice }}</view>
        </view>
      </view>
      <!-- 切换选项卡 -->
      <view class="selectContain">
        <view style="display: flex">
          <view :class="index == 1 ? 'active' : ''" @click="click(1)">点餐</view>
          <view :class="index == 2 ? 'active' : ''" @click="click(2)">商家</view>
          <view :class="index == 3 ? 'active' : ''" @click="click(3)">积分商城</view>
        </view>
        <view style="display: flex">
          <view class="order">
            <img style="width: 40rpx; height: 40rpx" src="@/static/订单.png" alt="" />
            订单
          </view>
          <view class="img"><img style="width: 40rpx; height: 40rpx; margin-left: 30rpx" src="@/static/我.png" alt="" /></view>
        </view>
      </view>
      <!-- 点餐 -->
      <!-- 商家信息 -->
      <BusinessInfo
        v-show="index == 2"
        :address="businessInfo.address"
        :notice="businessInfo.notice"
        :phone="businessInfo.phone"
      ></BusinessInfo>
      <!-- 积分商城 -->
      <!-- 购物车 -->
      <ShopCar v-show="index == 1"></ShopCar>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex'
import BusinessInfo from '@/components/business'
import ShopCar from '@/components/shopCar'
export default {
  data() {
    return {
      index: 1
    }
  },
  components: {
    BusinessInfo,
    ShopCar
  },
  props: ['branch_shop_id'],
  mounted() {
    this.$store.dispatch('getBusinessInfo', this.branch_shop_id)
    this.$store.dispatch('getBusinessNotice', this.branch_shop_id)
  },
  computed: {
    ...mapState({
      businessInfo: (state) => state.business.businessInfo,
      businessNotice: (state) => state.business.businessNotice
    })
  },
  methods: {
    goBack() {
      uni.navigateTo({
        url: '/pages/index/index'
      })
    },
    click(index) {
      this.index = index
    }
  }
}
</script>

<style lang="less" scoped>
.headerContain {
  height: 300rpx;
  width: 100%;
  background: #ea1625;
  justify-content: center;
  margin-top: -10px;
  color: #666666;
  font-size: 30rpx;

  .title {
    height: 200rpx;
    display: flex;
    width: 90%;
    background: #fff;
    border-radius: 3px;
    justify-content: space-around;
    margin: 0 auto;

    .titleInfo {
      padding-top: 80rpx;
      font-size: 24rpx;
      color: #666666;
      display: flex;
      width: 95%;
      align-items: center;

      view:nth-child(3) {
        height: 40rpx;
        width: 100rpx;
        background: #fff;
        color: green;
        border: green 1px solid;
        border-radius: 3px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 20rpx;
      }

      img {
        width: 80rpx;
        height: 80rpx;
        border-radius: 3px;
      }
    }
  }

  .businessTitle {
    width: 90%;
    height: 180rpx;
    background: #fff;
    border-radius: 3px;
    margin: auto;
    margin-top: 20rpx;
    border: 1px solid #eee;

    .box {
      padding: 20rpx;

      .businessInfo {
        display: flex;

        .title {
          height: 30px;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
      }
    }

    .notice {
      font-size: 24rpx;
      margin-top: 20rpx;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #666666;
    }
  }

  .selectContain {
    display: flex;
    margin: 25rpx 20rpx;
    justify-content: space-between;
    width: 100%;

    view {
      margin-right: 25rpx;
      height: 50rpx;
    }

    .order {
      height: 50rpx;
      width: 130rpx;
      background: #eeecec;
      color: #000;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 1.5rem;
    }

    .img {
      height: 50rpx;
      display: flex;
      align-items: center;
      border-left: 3px solid #eee;
    }
  }
}

.active {
  border-bottom: 3px solid #f7ac03;
  color: #000;
  font-weight: bold;
}
</style>
